<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="header::header"></head>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="renderer" content="ie-comp"/>
    <meta name="renderer" content="ie-stand"/>
    <title>普惠商城-个人中心-订单中心-线上订单-订单结算</title>
    <!-- 个人中心通用样式personal.css -->
    <link rel="stylesheet" th:href="@{/css/personal-order-check.css}"/>
    <style>
        #area_shadow_div > select {
            padding-left: 10px;
        !important;
        }

        select {
            margin-right: 5px;
        }

        #area_div > select {
            padding-left: 10px;
        !important;
        }

        .box1 {
            overflow: auto;
            margin-top: 20px;
        }

        .select_2_txt {
            display: none;
            background: #ffffff;
            min-width: 100px;
            max-width: 80%;
            height: 38px;
            border: 1px solid #cccccc;
            line-height: 38px;
            border-radius: 4px;
            margin-bottom: 20px;
            padding: 0 20px;
            margin-left: 74px;

        }

        .box2_select_2 {
            margin-left: 14px;
            padding-left: 20px;
            width: 428px;
            text-align: center;

        }

        .box2 {
            height: auto;
        }

        .login_box_2 .user {
            margin-top: 33px;
            padding-left: 10px;
        }

        .login_box_2 .password, .login_box_2 .tel {
            padding-left: 10px;
        }


    </style>
</head>
<body>
<div th:include="commonfragment::order-top-search-nav"></div>
<!--个人中心中间主体框架  -->
<div class="centerbody personal_middle">
    <form>
        <div class="centerbody personal_middle_main check">
            <div class="personal_middle_main_tit">
                <span>填写并核对订单信息</span>
            </div>
            <div class="personal_middle_main_box box1">
                <div class="box_tit">收货人信息
                    <input type="button" value="添加联系信息" class="add_info">
                </div>
                <ul id="userAddress-ul">
                    <li th:each="userAddress,stat : ${userAddressList}">
                        <div th:object="${userAddress}">
                            <input type="radio" th:attr="checked=${stat.first}" name="shr_info" class="shr_info">
                            <span class="contact" style="overflow-x: hidden" th:text="*{contact}"></span>
                            <span class="addrDetail" th:title="*{address}" th:text="*{address}"></span>
                            <span class="telPhone" th:text="*{telPhone}"></span>
                            <input type="hidden" class="addrId" th:value="*{id}">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="personal_middle_main_box box2">
                <div class="box_tit">配送方式</div>
                <p style="margin-bottom: 25px">
                    <input type="radio" name="deliveryType" value="1" checked="checked">送货到家
                    <input type="radio" name="deliveryType" style="margin-left: 76px;" value="2">自提商品
                </p>
                <div id="deliveryType">
                    <p>
                        <tr>
                            <td style="width: 65px;color: #3f3f3f; ">
                                所属区域：
                                <span id="area_div"></span>
                            </td>
                        </tr>
                    </p>
                    <p>
                        <tr>
                            <td style="width: 65px;color: #3f3f3f; ">提货点：</td>
                            <td>
                                <select class="box2_select_2" style="margin-left: 14px; width: 428px; padding-left: 186px;" name="pickPointId">
                                    <option value="">请选择商户</option>
                                </select>
                                <span class="area_msg2" style="color:red;"></span>
                            </td>
                        </tr>
                    </p>
                    <p><input type="text" disabled="disabled" class="select_2_txt"/></p>
                </div>
            </div>
            <div class="personal_middle_main_box box3">
                <div class="box_tit">商品信息</div>
                <div class="goods_info" style="height: 210px;">
                    <p th:text="${supplyerName}"></p>
                    <div class="goods_info_box" style="height: 156px;">
                        <div class="box_tit">
                            <span>商品</span>
                            <span>单价</span>
                            <span>商品数量</span>
                            <span>运费</span>
                            <span>总额</span>
                        </div>
                        <div>
                            <div class="box_big">
                                <div class="box_big_detail">
                                    <img th:src="@{${productImgUrl}}" alt="" class="box_big_detail_img">
                                    <p class="box_big_detail_info" th:text="${productName}"></p>
                                    <!-- <p class="box_big_detail_info">
                                         <span class="box_big_detail_price" th:text="'¥'+${phOrderOnlineRequest.price}"></span>
                                         <span class="box_big_detail_num" th:text="${phOrderOnlineRequest.num}"></span>
                                     </p>-->
                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                            <span class="box_small" th:text="'¥'+${phOrderOnlineRequest.price}"></span>
                            <span class="box_small" th:text="${phOrderOnlineRequest.num}"></span>
                            <span class="box_small" th:text="${phOrderOnlineRequest.postage}"></span>
                            <span class="box_small" th:text="${phOrderOnlineRequest.payMoney}">100010.00</span>

                        </div>
                    </div>
                </div>
                <div class="goods_info" style="height: auto;padding-bottom: 28px;">
                    <p style="border-bottom:1px solid #ccc;padding-bottom: 14px;">结算信息</p>
                    <div class="goods_info_check">
                        <ul>
                            <li>商品总额：<span th:text="'¥'+${phOrderOnlineRequest.price*phOrderOnlineRequest.num}">¥0.00</span></li>
                            <li>运费：<span th:text="'¥'+${phOrderOnlineRequest.postage}">¥0.00</span></li>
                            <li>应付总额：<span th:text="'¥'+${phOrderOnlineRequest.payMoney}">¥0.00</span></li>
                            <li>可获得待用积分：<span th:text="${phOrderOnlineRequest.payMoney}">¥0.00</span></li>
                        </ul>
                    </div>
                    <button type="button" class="form_summit" id="addOnlineOrder">提交订单</button>
                </div>
                <!--商品id-->
                <input type="hidden" name="productId" th:value="${phOrderOnlineRequest.productId}">
                <!--商品单价-->
                <input type="hidden" name="price" th:value="${phOrderOnlineRequest.price}">
                <!--数量-->
                <input type="hidden" name="num" th:value="${phOrderOnlineRequest.num}">
                <!--邮费-->
                <input type="hidden" name="postage" th:value="${phOrderOnlineRequest.postage}">
                <!--付款金额-->
                <input type="hidden" name="payMoney" th:value="${phOrderOnlineRequest.payMoney}">
                <!--会员id-->
                <input type="hidden" name="memberId" th:value="${phOrderOnlineRequest.memberId}">
                <!--详细地址id-->
                <input type="hidden" name="addrDetail" value="">
                <!--会员地址id-->
                <input type="hidden" name="addrId" value="0">
                <!--联系人id-->
                <input type="hidden" name="contact" value="">
                <!--手机号-->
                <input type="hidden" name="telPhone" value="">
            </div>
        </div>
    </form>
    <div style="clear:both;"></div>
</div>
<!-- 弹窗部分 -->
<div class="shadow">
</div>
<div class="login_box_2" style="background: #fff;">
    <form>
        <div class="add_addres">
            <span class="add_tit">添加联系地址</span>
            <img src="../../images/叉.png" alt="" class="cancel_small">
        </div>

        <p>
            <label for="" style="padding-left: 87px;">
                <span class="necessarily">*</span>联系人
            </label><input name="contact" type="text" class="validate[required] inputbox user"/>
        </p>
        <p>
            <label for="" style="padding-left: 87px;">
                <span class="necessarily">*</span>手机号
            </label><input name="telPhone" type="text" class="validate[required,custom[phone]] inputbox tel"/>
        </p>
        <div style="position: relative;padding-left: 87px;margin-top: 20px;">
            <tr>
                <td style="width: 65px;color: #3f3f3f; padding-right: 40px;font-size: 14px;"><span class="necessarily">*</span>区域</td>
                <td style="margin-left: 5px;">
                    <span id="area_shadow_div"></span>
                </td>
            </tr>
        </div>
        <label for="" style="padding-left: 87px;"><span class="necessarily">*</span>详细地址</label>
        <input name="address" type="text" class="validate[required] inputbox tel" style="margin-left: 12px;">
        <p style="text-align: center;">
            <button type="button" id="insertOrderAddress" class="inputbox btn" style="font-size: 14px;">保存</button>
        </p>
    </form>
</div>

<!-- 页面底部 -->
<div th:include="footer::footer"></div>
</body>
<script th:src="@{/js/area.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".box1 input:checked").parent().parent().addClass("selected");
        $(".box1 input").change(function () {
            $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
        });

        $('.cancel_small').click(function () {
            $('.shadow').css('display', 'none');
            $('.login_box_2').css('display', 'none');
            $("#insertOrderAddress").recursiveParentNode("form").formEmpty();
        });

        $('.add_info').click(function () {
            $('.shadow').css('display', 'block');
            $('.login_box_2').css('display', 'block');
            $("#insertOrderAddress").recursiveParentNode("form").formEmpty();
        });

        $('.shadow').css('height', $(window).height());
        $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
        $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);

        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.login_box_2').css('top', ($(window).height() - $('.login_box_2').height()) / 2);
            $('.login_box_2').css('left', ($(window).width() - $('.login_box_2').width()) / 2);
        });

        //提货点详情事件
        $('.box2_select_2').on("change", function () {
            var $this = $(this),
                dataContactsAddressDetail = $this.find("option:selected").attr("data-contacts-address-detail") || "",
                $area_msg2 = $('.area_msg2'),
                $select_2_txt = $('.select_2_txt');
            var length = dataContactsAddressDetail.length;
            if (length === 0) {
                $area_msg2.text('请选择提货点！');
                $select_2_txt.css('display', 'none');
            } else {
                $area_msg2.text('');
                $select_2_txt.css('display', 'block');
                $select_2_txt.val(dataContactsAddressDetail);
                $select_2_txt.css('width', length * 15 + 'px')
            }
        });


        //区域div
        var $areaDiv = $("#area_div");
        //区域事件
        areaAll({
            startFun: function ($div) {
                $div.find(".formError").remove();
            },
            url: "/shopping/merchant/getAllPosition",
            totalSelect: 3,
            DivId: "area_div",
            selectWidthArr: ["100px", "100px", "150px"],
            areaArr: ["", "", ""],
            idArr: ["province", "city", "area"]
        });

        //区域change 加载提货点事件
        $($areaDiv).on("change", 'select', function () {
            $.post("/shopping/order/getWarehouseAddressVoList", {
                    provinceId: $areaDiv.find("select[name='province']").attr("data-selected-area-code"),
                    cityId: $areaDiv.find("select[name='city']").attr("data-selected-area-code"),
                    areaId: $areaDiv.find("select[name='area']").attr("data-selected-area-code"),
                    userId: [[${supplierId}]]
                },
                function (data) {
                    //提货点select
                    var $pickPointId = $("select[name='pickPointId']");
                    var option = [];
                    option.push('<option value="">请选择商户</option>');
                    if (data.length !== 0) {
                        $(data).each(function (i, _data) {
                            option.push(Common.adapterStringlHandler('<option data-contacts-address-detail="{provinceName}{cityName}{countyName}{address}" value="{id}">{contacts}</option>', _data));
                        })
                    }
                    $pickPointId.html(option.join(""));
                })
        });

        //弹窗区域事件
        areaAll({
            startFun: function ($div) {
                $div.find(".formError").remove();
            },
            url: "/shopping/merchant/getAllPosition",
            totalSelect: 3,
            DivId: "area_shadow_div",
            selectWidthArr: ["100px", "100px", "150px"],
            areaArr: ["", "", ""],
            idArr: ["province", "city", "area"],
            backFun: function () {
                $("#area_shadow_div").find('select').addClass("validate[required]");
            }
        });

        //弹窗添加收货地址
        $("#insertOrderAddress").on("click", function () {
            var validateForm = $(this).recursiveParentNode("form");

            $("#insertOrderAddress").formSubmit({
                url: "/shopping/order/insertOrderAddress",
                data: {
                    province: validateForm.find("select[name='province']").find("option:selected").attr("data-area-code"),
                    city: validateForm.find("select[name='city']").find("option:selected").attr("data-area-code"),
                    area: validateForm.find("select[name='area']").find("option:selected").attr("data-area-code"),
                    positionId: validateForm.find("select[name='area']").val()
                },
                backFun: function () {
                    $('.cancel_small').click();
                    window.location.href = Common.generateUrl(
                        "/shopping/order/generateCheckOrder",
                        {
                            productId: [[${phOrderOnlineRequest.productId}]],
                            num: [[${phOrderOnlineRequest.num}]]
                        }
                    );
                }
            })
        });

        //提交订单
        $("#addOnlineOrder").on("click", function () {
            var addrId = $("input[name='addrId']");
            var checkedVal = $("input[name='deliveryType']:checked").val();
            if (checkedVal === "1" && addrId.val() === "0") {
                Common.alert("请选择收货地址");
                return false;
            }
            if (checkedVal === "2" && isNull($("select[name='pickPointId']").val())) {
                Common.alert("请选择自提货地址");
                return false;
            }
            $("#addOnlineOrder").formSubmit({
                url: "/shopping/order/addOnlineOrder",
                data: {deliveryType: checkedVal},
                backFun: function (result) {
                    if (result.code === "200") {
                        window.location.href = "/shopping/order/findOnlineOrders"
                    } else {
                        Common.alert(result.message);
                    }
                }
            })
        });

        //送货到家 自提商品事件
        $("input[name='deliveryType']").click(function () {
            var $deliveryTypeDiv = $("#deliveryType");
            $(this).val() === "2" ? $deliveryTypeDiv.show() : $deliveryTypeDiv.hide();
        });

        //自提商品自触发点击事件
        $("input[name='deliveryType']:checked").click();

        var $userAddressUl = $("#userAddress-ul");
        //收货地址点击事件
        $userAddressUl.on("click", "li", function () {
            var $div = $(this).find("div:first");
            $("input[name='addrDetail']").val($div.find(".addrDetail:first").html());
            $("input[name='addrId']").val($div.find(".addrId:first").val());
            $("input[name='contact']").val($div.find(".contact:first").html());
            $("input[name='telPhone']").val($div.find(".telPhone:first").html());
        });

        //初始化收货地址
        $userAddressUl.find("li.selected").click();
    })
</script>

</html>